<template>
  <div>
    <introduce>
      <span class="title-gray" slot="pre">子账号/</span>
      <span class="title-bold" slot="title">添加子账号</span>
      <span slot="info"> - 可添加当前组织的子账号，并为其分配权限。</span>
    </introduce>
    <el-card class="card">
      <el-form
        label-width="120px"
        :model="addForm"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="账号：" prop="account"
          ><el-input v-model="addForm.account"></el-input
        ></el-form-item>
        <el-form-item label="用户名称：" prop="username"
          ><el-input v-model="addForm.username"></el-input
        ></el-form-item>
        <el-form-item label="密码：" prop="password"
          ><el-input v-model="addForm.password" type="password"></el-input
        ></el-form-item>
        <el-form-item label="确认密码：" prop="confirmpwd"
          ><el-input v-model="addForm.confirmpwd" type="password"></el-input
        ></el-form-item>
        <el-form-item label="类型：" prop="type">
          <el-radio v-model="addForm.type" label="1"
            >超级管理员（所有权限）</el-radio
          ><br />
          <el-radio v-model="addForm.type" label="2"
            >管理员（拥有部分权限）</el-radio
          ><br />
          <el-radio v-model="addForm.type" label="3"
            >观察员（只读权限）</el-radio
          >
        </el-form-item>
        <el-form-item label="账号描述：" prop="desc"
          ><el-input
            v-model="addForm.desc"
            type="textarea"
            :rows="6"
            style="width: 220px"
          ></el-input
        ></el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="addAccount"
            >确认</el-button
          >
          <el-button size="mini">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Introduce from "@/components/Introduce.vue";
import { $accountAdd } from "@/api/index";
export default {
  name: "addAccount",
  components: { Introduce },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.addForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      addForm: {
        account: "",
        username: "",
        type: "",
        desc: "",
        password: "",
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirmpwd: [{ validator: validatePass, trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
      },
    };
  },
  methods: {
    addAccount() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          $accountAdd(this.addForm).then((res) => {
            if (res) {
              this.$message.success("添加成功");
            }
          });
        } else {
          this.$message.error("请填写必要的表单项");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.card {
  margin-top: 10px;
  .el-input {
    width: 220px;
  }
}
</style>